import React from 'react'
import '../../styles/myJump/myfoot.css'
import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
import { withRouter } from "react-router-dom";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import Music from './music';
import Condition from './condition';
import Aboutme from './aboutMe';

const tabs = [
    { title: <Link to='/website/music'><Badge>音乐</Badge></Link> },
    { title: <Link to='/website/condition'><Badge>动态</Badge></Link> },
    { title: <Link to='/website/aboutme'><Badge>关于我</Badge></Link> },
];


class MyFooter extends React.Component {
    constructor() {
        super()
        this.state = {
            profile: ''
        }
    }

    render() {
        return (
            <div className='my-jump-foot'>
                <Tabs tabs={tabs} initialPage={0} >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                        <Route path='/website/music' component={Music}></Route>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                        <Route path='/website/condition' component={Condition}></Route>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',  backgroundColor: '#fff' }}>
                        <Route path='/website/aboutme' component={Aboutme}></Route>
                    </div>

                </Tabs>
                <WhiteSpace />
            </div>
        )
    }
}

export default withRouter(MyFooter)